<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>12306车票</title>
		<link rel="stylesheet" href="resources/layui/css/layui.css">
		<link rel="stylesheet" href="resources/css/oneway.css" />
		<script src="resources/js/jquery-3.7.1.min.js"></script>

	</head>
	<body>
		<div>
			<!-- 封装头 -->
			<div id="head12306"></div>
			<!-- 单程、往返查询 -->
			<div class="title_1">
				<form class="layui-form" action="">
					<!-- 单程/往返单选框 -->
					<ul style="display: flex; align-items: center; justify-content: space-between;">
						<li style="flex: 1;" class="button_1">
							<div class="layui-form-item">
								<div class="layui-input-block">
									<input type="radio" name="trip" value="单程" title="单程" checked>
									<input type="radio" name="trip" value="往返" title="往返">
								</div>
							</div>
						</li>

						<!-- 出发地 -->
						<li style="flex: 2;" class="title_1_1">
							<div class="layui-form-item">
								<label class="layui-form-label">出发地</label>
								<div class="layui-input-block">
									<input type="text" name="from" required lay-verify="required" placeholder="请输入出发地"
										autocomplete="off" class="layui-input">
								</div>
							</div>
						</li>

						<!-- 目的地 -->
						<li style="flex: 2;" class="title_1_2">
							<div class="layui-form-item">
								<label class="layui-form-label">目的地</label>
								<div class="layui-input-block">
									<input type="text" name="to" required lay-verify="required" placeholder="请输入目的地"
										autocomplete="off" class="layui-input">
								</div>
							</div>
						</li>

						<!-- 出发日 -->
						<li style="flex: 1;" class="title_1_3">
							<div class="layui-form-item">
								<label class="layui-form-label">出发日</label>
								<div class="layui-input-block">
									<input type="text" name="depart_date" required lay-verify="required"
										placeholder="请选择出发日" autocomplete="off" class="layui-input" id="departDate">
								</div>
							</div>
						</li>

						<!-- 返程日 -->
						<li style="flex: 1;" class="title_1_3">
							<div class="layui-form-item">
								<label class="layui-form-label">返程日</label>
								<div class="layui-input-block">
									<input type="text" name="return_date" required lay-verify="required"
										placeholder="请选择返回日期" autocomplete="off" class="layui-input" id="returnDate">
								</div>
							</div>
						</li>

						<!-- 普通/学生单选框 -->
						<li style="flex: 1;" class="button_2">
							<div class="layui-form-item">
								<div class="layui-input-block">
									<input type="radio" name="type" value="普通" title="普通" checked>
									<input type="radio" name="type" value="学生" title="学生">
								</div>
							</div>
						</li>

						<!-- 查询按钮 -->
						<li style="flex: 1;" class="button_3">
							<div class="layui-form-item">
								<div class="layui-input-block">
									<button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
								</div>
							</div>
						</li>
					</ul>
				</form>

			</div>
			<!-- 日期车票选择 -->
			<div class="title_2">

				<div class="layui-tab layui-tab-card">
					<ul class="layui-tab-title" id="dateTabs">
					

					</ul>
					<div class="layui-tab-content">
						<div class="right-panel">
							<!-- <h2>筛选选项</h2> -->
							<div class="filter-item">
								<span>
									<label>车次类型：</label>
									<button type="button" class="btn-all" data-target="StationType"
										style="margin-left: -6px;">全部</button>
									<ul id="trainTypeList">
										<li><input type="checkbox" name="trainType" value="GC"><label
												>GC-高铁/城际</label></li>
										<li><input type="checkbox" name="trainType" value="D"><label
												>D-动车</label></li>
										<li><input type="checkbox" name="trainType" value="Z"><label
												>Z-直达</label></li>
										<li><input type="checkbox" name="trainType" value="T"><label
												>T-特快</label></li>
										<li><input type="checkbox" name="trainType" value="K"><label
												>K-快速</label></li>
										<li><input type="checkbox" name="trainType" value="other"><label
												>其他</label></li>
										<li><input type="checkbox" name="trainType" value="Fuxing"><label
												>复兴号</label></li>
										<li><input type="checkbox" name="trainType" value="smart"><label
												>智能动车组</label></li>
										<li style="margin-left: 100px;">
											<label>发车时间：</label>
											<select id="outTime">
												<option value="00:00-24:00">00:00-24:00</option>
												<option value="00:00-24:00">00:00-06:00</option>
												<option value="00:00-24:00">06:00-12:00</option>
												<option value="00:00-24:00">12:00-18:00</option>
												<option value="00:00-24:00">18:00-24:00</option>
												
											</select>
										</li>
									</ul>
								</span>
							</div>
							<div class="filter-item">
								<label>出发车站：</label>
								<button type="button" class="btn-all" data-target="outStation">全部</button>
								<!-- 出发车站选项 -->
							</div>
							<div class="filter-item">
								<label>到达车站：</label>
								<button type="button" class="btn-all" data-target="intStation">全部</button>
								<!-- 到达车站选项 -->
							</div>
							<div class="filter-item">
								<label>车次席别：</label>
								<button type="button" class="btn-all" data-target="seatType">全部</button>
								<!-- 车次席别选项 -->
							</div>
							<button type="button" class="filter-button" onclick="ok()">筛选</button>
						</div>
					</div>
				</div>
				<div class="title_3">
					<ul id="showTrain">
						<li><input type="checkbox" name="showTrain_1" value="discount"><label
								>显示折扣车次</label></li>
						<li><input type="checkbox" name="showTrain_2" value="score"><label >显示积分兑换车次</label>
						</li>
						<li><input type="checkbox" name="showTrain_3" value="reserve"><label
								>显示全部可预订车次</label></li></ul>
				</div>
				<div class="table">
					<table class="layui-table" lay-filter="trainTable">
						<thead>
							<tr>
								<th lay-data="{field: 'trainNumber', width: 80}">车次</th>
								<th lay-data="{field: 'departureArrival', width: 80}">出发站/<br>到达站</th>
								<th lay-data="{field: 'departureAndArrivalTime', width: 85,sort: true}">出发时间/<br>到达时间</th>
								<th lay-data="{field: 'duration', width: 80, sort: true}">历时</th>
								<th lay-data="{field: 'businessSeat', width: 65}">商务座<br>特等座</th>
								<th lay-data="{field: 'supperFirst', width: 65}">优选一等座</th>
								<th lay-data="{field: 'firstClass', width: 65}">一等座</th>
								<th lay-data="{field: 'secondClass', width: 80}">二等座<br>二等包座</th>
								<th lay-data="{field: 'GSoftSleeper', width: 70}">高级软卧</th>
								<th lay-data="{field: 'softSleeper', width: 80}">软卧/动卧<br>一等卧</th>
								<th lay-data="{field: 'hardSleeper', width: 80}">硬卧<br>二等卧</th>
								<th lay-data="{field: 'softSeat', width: 60}">软座</th>
								<th lay-data="{field: 'hardSeat', width: 60}">硬座</th>
								<th lay-data="{field: 'noSeat', width: 60}">无座</th>
								<th lay-data="{field: 'other', width: 65}">其他</th>
								<th lay-data="{field: 'remarks', width: 100}">备注</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>G101</td>
								<td>北京南<br>上海虹桥</td>
								<td>06:30<br>12:30</td>
								<td>7小时</td>
								<td>¥1000</td>
								<td>¥800</td>
								<td>¥500</td>
								<td>¥600</td>
								<td>¥400</td>
								<td>¥300</td>
								<td>¥200</td>
								<td>¥100</td>
								<td>有</td>
								<td>有</td>
								<td>-</td>
								<td>
									<button type="button" class="pay" >预定</button>
								</td>
							</tr>
							<tr>
								<td>G102</td>
								<td>上海虹桥<br>北京南</td>
								<td>07:00<br>13:00</td>
								<td>6小时</td>
								<td>¥1000</td>
								<td>¥800</td>
								<td>¥500</td>
								<td>¥600</td>
								<td>¥400</td>
								<td>¥300</td>
								<td>¥200</td>
								<td>¥100</td>
								<td>有</td>
								<td>有</td>
								<td>-</td>
								<td>
									<button   class="pay" >预定</button>
								</td>
							</tr>
							<!-- 更多数据行 -->
						</tbody>
					</table>
				</div>



			</div>
		</div>
		</div>
		<script>
			function loadComponent(id, url) {
				$("#" + id).load(url);
			}
			loadComponent("head12306", "head_12306");
			
		</script>
		<script src="resources/layui/layui.js"></script>
		<script>
			layui.use(['form', 'element', 'laydate', 'table'], function() {
				var element = layui.element;
				var form = layui.form;
				var laydate = layui.laydate;
				var table = layui.table;

				element.init(); //初始化导航组件
				form.render(); //渲染表单
				
				

				// 初始化日期选择器

				laydate.render({
					elem: '#departDate',
					type: 'date'
				});
				laydate.render({
					elem: '#returnDate',
					type: 'date'
				});

				// 获取当前日期
				const today = new Date();
				const dateTabs = document.getElementById('dateTabs');
				const tabContent = document.querySelector('.layui-tab-content');

				// 生成未来15天的日期
				for (let i = 0; i < 15; i++) {
					const date = new Date(today.getTime() + i * 24 * 60 * 60 * 1000); // 当前日期加上i天
					const day = String(date.getDate()).padStart(2, '0'); // 获取日期部分，并补零
					const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份部分，并补零
					const formattedDate = `${month}-${day}`; // 格式化为 MM-DD

					// 创建li元素并添加到dateTabs中
					const li = document.createElement('li');
					li.textContent = formattedDate;
					if (i === 0) {
						li.classList.add('layui-this'); // 默认选中第一个
					}
					dateTabs.appendChild(li);

					// 创建对应的内容区域
					const content = document.createElement('div');
					content.classList.add('layui-tab-item');
					if (i === 0) {
						content.classList.add('layui-show'); // 默认显示第一个
					}
					tabContent.appendChild(content);
				}

				// 重新渲染选项卡
				element.init();

				// 自动渲染表格
				table.init('trainTable', {


				});





				//监听提交
				form.on('submit(formDemo)', function(data) {
					console.log(data.field); // 获取表单数据
					$.ajax({
						url: '/oneway',
						type: 'post',
						data: {

						},
						success: function(response) {
							// 处理服务器返回的数据
							console.log(response)
							if (response.code == 200) {

								// 查询成功
								layer.msg('查询成功');

								// 跳转到首页或其他页面
							} else {
								// 登录失败
								layer.msg('查询失败');
							}
						},
						error: function() {
							layer.msg('请求失败，请稍后重试');
						}
					});
					return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
			});
		</script>
	</body>
</html>